//	饼图自定义配色

import React, { useState } from 'react';
import InputColorPicker from './InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';
import DataColor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/DataColor';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const PieCustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ chartLabelLineColor, setChartLabelLineColor ] = useState( ( config.style && config.style.chartLabelLineColor ) || '#000' );

	const handleLineColorChange = ( color ) => {
		setChartLabelLineColor( color );
		form.setFieldsValue( { chartLabelLineColor: color } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (
		<div>

			<FormItem
				label="轴线颜色" name="chartLabelLineColor" labelAlign="left" labelCol={ { span: 8 } }
				wrapperCol={ { span: 16 } }>
				<InputColorPicker
					color={ chartLabelLineColor }
					change={ ( color ) => handleLineColorChange( color ) }
				></InputColorPicker>
			</FormItem>

			<DataColor config={config} form={form} onValuesChange={onValuesChange} colorName='customBlockColor'></DataColor>


		</div>
	);
};

export default React.memo( PieCustomColor );
